<template>
  <div class="bgGradient">
    <div class="text">
      YuYuFeng,welcome to SHIT world
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
};
</script>
<style lang="scss" scoped>
.bgGradient {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    125deg,
    #55efc4,
    #6c5ce7,
    #d63031,
    #fdcb6e,
    #00cec9
  );
  background-size: 400%;
  background-repeat: no-repeat;
  animation: bganimation 10s infinite;
  display: flex;
  justify-content: center;
  align-items: center;

  .text {
    font-family: 微软雅黑;
    font-size: 1.4rem;
    font-weight: 400;
    color: #fff;
  }
  @keyframes bganimation {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 100%;
    }
    100% {
      background-position: 0 50%;
    }
  }
}
</style>
